<template>
  <div class="card-common-inner public-line-warn">
    <first-level-title title="异常告警">
      <div slot="other" class="other-text">2022年10月26日</div>
    </first-level-title>
    <div class="warn-kpi">
      <div class="kpi-item">
        <img src="~@/assets/imgs/publicline/index/warn_jzyc.png" />
        <div class="kpi-info">
          <div class="title">基站异常提醒</div>
          <div class="count">381<span>个</span></div>
        </div>
      </div>
      <div class="kpi-item">
        <img src="~@/assets/imgs/publicline/index/warn_gwzy.png" />
        <div class="kpi-info">
          <div class="title">固网资源告警</div>
          <div class="count">381<span>个</span></div>
        </div>
      </div>
      <div class="kpi-item">
        <img src="~@/assets/imgs/publicline/index/warn_fwts.png" />
        <div class="kpi-info">
          <div class="title">服务投诉告警</div>
          <div class="count">381<span>个</span></div>
        </div>
      </div>
      <div class="kpi-item">
        <img src="~@/assets/imgs/publicline/index/warn_xcyj.png" />
        <div class="kpi-info">
          <div class="title">携出预警</div>
          <div class="count">381<span>个</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firstLevelTitle from '@/components/common/firstLevelTitle.vue'

export default {
  components: { firstLevelTitle },
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/card.less';
.public-line-warn {
  .warn-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    .kpi-item {
      background: #FCFCFC;
      border-radius: 2px;
      padding: 13px 0 13px 13px;
      width: 44%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    img {
      width: 32px;
    }
    .title {
      color: #666;
      margin-bottom: 4px;
    }
    .count {
      font-size: 18px;
      > span {
        font-size: 13px;
        color: #999;
        padding-left: 8px;
      }
    }
    .kpi-info {
      margin-left: 18px;
    }
  }
}
</style>